/**
 * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
 * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
 */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
    ("「页面 JS」：当前页面地址 " + location.href);
    debugger
    const self = this;
    const ddcatSources = [{id: "ds_mod:afcd8fe5-2e13-439a-ae45-3093b9c47e96", name: "处罚案卷总览"}];

    let recType2Ele = self.$$("text_6czv2h");
    let recType1Ele = self.$$("text_7mdspm");
    let isLegalCheck = self.$$("text_d9seax");

    fetchDdcatData(ddcatSources[0].id).then(res => {
        let recTotal = res[2].total_count;
        let recType2 = res[1].total_count;
        let recType1 = res[0].total_count;
        let isLegal = res[3].total_count;
        let isLegalRate = (isLegal / recTotal) * 100;
        addHtmlLegalCheck(recTotal, isLegal, isLegalRate, isLegalCheck)
        addHtmlRecType1(recType1, recType1Ele)
        addHtmlRecType2(recType2, recType2Ele)
    })

}

function addHtmlRecType2(recType2, recType2Ele) {
    let html = `<div style="
    width: 100%;
    height: 100px;
    background-image: linear-gradient(0deg, #E6FFF4 0%, #B6FAE0 100%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
">
    <div style="
        display: flex;
        flex-direction: column;
        height: 100%;
    ">
        <span style="
            font-weight: 400;
            font-size: 14px;
            color: #223355;
            margin-bottom: 4px;
        ">简易程序</span>

        <span style="
            font-weight: 700;
            font-size: 24px;
            color: #11C79B;
        ">${recType2}</span>
    </div>

    <img
            src="/linglong-api/files/iconfont/image/566A5piT56iL5bqPMTEx.png"
            alt="图标"
            style="
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 36px;
            height: 36px;
            object-fit: contain;
        "
    >
</div>`;
    recType2Ele.$$setValue(html);
}

function addHtmlRecType1(recType1, recType1Ele) {
    let html = `<div style="
    width: 100%;
    height: 100px;
    background-image: linear-gradient(0deg, #E6FFF4 0%, #B6FAE0 100%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    padding: 12px 16px;
    box-sizing: border-box;
">
    <div style="
        display: flex;
        flex-direction: column;
        height: 100%;
    ">
        <span style="
            font-weight: 400;
            font-size: 14px;
            color: #223355;
            margin-bottom: 4px;
        ">简易程序</span>

        <span style="
            font-weight: 700;
            font-size: 24px;
            color: #11C79B;
        ">${recType1}</span>
    </div>

    <img
            src="/linglong-api/files/iconfont/image/566A5piT56iL5bqPMTEx.png"
            alt="图标"
            style="
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 36px;
            height: 36px;
            object-fit: contain;
        "
    >
</div>`;
    recType1Ele.$$setValue(html);
}

function addHtmlLegalCheck(recTotal, isLegal, isLegalRate, isLegalCheck) {
    let html = `<div style="background-image: linear-gradient(0deg, #F0F9FF 0%, #D6EDFF 100%); border-radius: 4px; padding: 16px; width: 100%;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
        <div style="display: flex; align-items: center;">
            <h4 style="font-size: 14px; font-weight: 500; margin: 0; color: #223355;">案件总数</h4>
        </div>
        <div style="font-size: 24px; font-weight: bold;line-height: 24px; color: #3388FF;">${recTotal}</div>
    </div>
    <div style="background-color: #ffffff; border-radius: 4px; padding: 16px;">
        <div style="display: flex; flex-direction: column; gap: 8px;">
            <!-- 经法制审核案卷数 -->
            <div>
                <div style="display: flex; align-items: center; margin-bottom: 4px;">
                    <div style="width: 8px; height: 8px; background: #11C79B; border-radius: 50%; margin-right: 8px;"></div>
                    <h5 style="font-size: 14px; color: #223355; margin: 0; font-weight: 400;">经法制审核案卷数</h5>
                </div>
                <div style="font-size: 16px; font-weight: bold; color: #223355; text-align: left;margin-left: 16px;">${isLegal}</div>
            </div>

            <!-- 法制审核占比 -->
            <div>
                <div style="display: flex; align-items: center; margin-bottom: 4px;">
                    <div style="width: 8px; height: 8px; background: #11C79B; border-radius: 50%; margin-right: 8px;"></div>
                    <h5 style="font-size: 14px; color: #223355; margin: 0; font-weight: 400;">法制审核占比</h5>
                </div>
                <div style="font-size: 16px; font-weight: bold; color: #223355; text-align: left;margin-left: 16px;">${isLegalRate} %</div>
            </div>
        </div>
    </div>
</div>`;
    isLegalCheck.$$setValue(html);
}


/**
 * 从 ddcat 数据源拉取所有数据
 * @returns Promise<数组> - 返回结果数组
 */
function fetchDdcatData(sourceId) {
    const jsonParams = {pageSize: 99999};
    return api.DATA_SOURCE_EXECUTE(sourceId, "ddcat", [], [], JSON.stringify(jsonParams)).then(res => {
        if (res && !res.hasError && res.result) {
            return res.result;
        } else {
            console.warn("查询失败", res);
            return [];
        }
    });
}
